<template>
  <div class="peipao_body">
    <div class="tixian_type_div">
      <div class="t_item">
        <img class="tag_img" src="../../assets/images/tx_icon1.png" alt="" />
        <div class="r_cont_div">
          <div class="title">今日待提现(元)</div>
          <div class="sub_title">1200.00</div>
        </div>
      </div>
      <div class="t_item">
        <img class="tag_img" src="../../assets/images/tx_icon2.png" alt="" />
        <div class="r_cont_div">
          <div class="title">今日已提现(元)</div>
          <div class="sub_title">121351.00</div>
        </div>
      </div>
      <div class="t_item">
        <img class="tag_img" src="../../assets/images/tx_icon3.png" alt="" />
        <div class="r_cont_div">
          <div class="title">本月已提现(元)</div>
          <div class="sub_title">121351.00</div>
        </div>
      </div>
    </div>

    <div class="serch_div">
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form
            :inline="true"
            :model="serch_form"
            :label-width="'92px'"
            class="ty_serch_form"
          >
            <el-form-item label="名称">
              <el-input v-model="serch_form.name"></el-input>
            </el-form-item>

            <el-form-item>
              <div class="ty_serch_btn">
                <el-button class="cx_btn" type="primary" size="small">查 询</el-button>
                <el-button class="cz_btn" size="small">重 置</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div class="table_body">
      <ty-Table :tablePrps="tablePrps" :tableData="tableData" :fixed_width="'250'">
        <template slot-scope="props" slot="diy_column">
          <!--图片-->
          <template v-if="props.row.key == 'url_ext'">
            <el-image
              class="banner_image"
              :src="props.row.url_ext"
              :preview-src-list="[props.row.url_ext]"
              :lazy="true"
            ></el-image>
          </template>
          <!--启用状态-->
          <template v-if="props.row.key == 'status'">
            {{ props.row.status == 1 ? "启用" : "禁用" }}
          </template>
        </template>

        <template slot="diy_fixed" slot-scope="props">
          <el-button class="dl_color_btn" type="text" @click="fqtx_click">提现</el-button>
          <el-button class="dl_color_btn" type="text">删除</el-button>
        </template>
      </ty-Table>

      <el-row type="flex" justify="center">
        <el-col :span="24">
          <div class="ty_fy_div">
            <el-pagination
              :current-page="fyData.start"
              :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
              :page-size="fyData.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="fyData.totalRows"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <!--提现弹窗-->
    <el-dialog
      title="提现"
      :visible.sync="tx_DialogVisible"
      width="500px"
      center
      class="ty_tc_title"
    >
      <el-form label-width="110px" class="ty_tc_form" :model="tx_form">
        <el-form-item label="提现状态" prop="type">
          <el-radio-group v-model="tx_form.type">
            <el-radio :label="0">已打款</el-radio>
            <el-radio :label="1">打款失败</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="url" label="转账截图">
          <div class="logoDiv">
            <div class="divs" v-if="tx_form.url">
              <div class="imageDiv">
                <div class="zzc"></div>
                <i
                  class="el-icon-zoom-in look"
                  @click="[(dialogImageUrl = tx_form.url), (dialogVisible = true)]"
                ></i>
                <i class="el-icon-delete delete" @click="tx_form.url = ''"></i>
                <img class="image" :src="tx_form.url" />
              </div>
            </div>
            <div v-else>
              <el-upload action :http-request="upload_change" :show-file-list="false">
                <img class="uplod_Logo" src="../../assets/images/upload_img.png" alt="" />
              </el-upload>
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="remark" label="备注" class="diy_textarea_width">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="tx_form.remark"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer ty_tc_btn">
        <el-button @click="tx_DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="qrtx_Click">确认</el-button>
      </span>
    </el-dialog>

    <!--查看大图-->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import tyTable from "@/components/ty_el_table/ty_el_table.vue";
import Upload from "@/common/upload_img.js";
export default {
  components: {
    tyTable,
  },
  data() {
    const tablePrps = [
      { key: "id", label: "id" },
      { diy_show: true, key: "url_ext", label: "图片" },
      { key: "link", label: "跳转地址" },
      { diy_show: true, key: "status", label: "启用状态" },
      { key: "created_at", label: "创建时间" },
      { key: "updated_at", label: "修改时间" },
    ];
    return {
      tablePrps,
      tableData: [
        {
          id: 1,
          url_ext: "",
          link: "",
          status: 1,
          created_at: "2023-10-01 12:00:00",
          updated_at: "2023-10-01 12:00:00",
        },
      ],
      serch_form: {
        phone: "",
      },
      fyData: {
        start: 1, //当前第几页
        limit: 10, //每页多少条
        totalRows: 0, //总数据条数
      },
      tx_DialogVisible: false,
      tx_form: {
        type: 1,
        url: "",
        remark: "",
      },
      dialogImageUrl: null,
      dialogVisible: false,
    };
  },
  methods: {
    init_fun() {},
    handleSizeChange(val) {
      this.fyData.limit = val;
      this.init_fun();
    },
    handleCurrentChange(val) {
      this.fyData.start = val;
      this.init_fun();
    },

    async upload_change(file) {
      let obj = await new Upload().uploadImg(file, this);
      if (obj.type == true) {
        this.tx_form.url = obj.url;
        this.$message.success("上传成功");
      } else {
        this.$message.warning("上传失败");
      }
    },
    fqtx_click() {
      this.tx_DialogVisible = true;
    },
    qrtx_Click() {},
  },
};
</script>

<style lang="scss" scoped>
.peipao_body {
  .tixian_type_div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
    .t_item {
      height: 100px;
      background: linear-gradient(0deg, #f6f9ff 0%, #ffffff 100%);
      box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
      border-radius: 10px;
      border: 2px solid #ffffff;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0 20px;
      .tag_img {
        width: 52px;
        height: 52px;
        margin-right: 20px;
      }
      .r_cont_div {
        display: flex;
        flex-direction: column;
        height: 100px;
        justify-content: space-evenly;
        .title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #8f9dac;
        }
        .sub_title {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 30px;
          color: #000000;
        }
      }
    }
  }
  .serch_div {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }
  .table_body {
    background: linear-gradient(0deg, #f9fafe 0%, #ffffff 100%);
    box-shadow: 0px 2px 8px 0px rgba(54, 131, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
  }
}

.diy_textarea_width {
  ::v-deep .el-textarea__inner {
    width: 280px;
  }
}
</style>
